<template>
  <div class="projects">
    <!-- 页面头部 -->
    <section class="projects__header section">
      <div class="container">
        <h1 class="section-title">项目作品</h1>
        <p class="projects__intro">
          这里展示了我参与和完成的项目，涵盖前端开发、全栈应用等多个领域
        </p>
      </div>
    </section>
    
    <!-- 项目筛选 -->
    <section class="projects__filter section">
      <div class="container">
        <div class="projects__filter-wrapper">
          <ElRadioGroup v-model="currentCategory" size="large" @change="handleCategoryChange">
            <ElRadioButton
              v-for="category in categories"
              :key="category.value"
              :label="category.value"
            >
              {{ category.label }}
            </ElRadioButton>
          </ElRadioGroup>
        </div>
      </div>
    </section>
    
    <!-- 项目列表 -->
    <section class="projects__list section">
      <div class="container">
        <TransitionGroup name="list" tag="div" class="projects__grid">
          <div
            v-for="project in filteredProjects"
            :key="project.id"
            class="projects__item"
          >
            <ProjectCard :project="project" />
          </div>
        </TransitionGroup>
        
        <!-- 空状态 -->
        <ElEmpty
          v-if="filteredProjects.length === 0"
          description="暂无项目"
          :image-size="200"
        />
      </div>
    </section>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useProjectsStore } from '@/stores/projects'
import ProjectCard from '@/components/sections/ProjectCard.vue'

const projectsStore = useProjectsStore()
// 使用 storeToRefs 保持响应式
const { categories, filteredProjects, currentCategory } = storeToRefs(projectsStore)
// actions 可以直接解构
const { setCategory } = projectsStore

// 处理分类切换
function handleCategoryChange(value) {
  setCategory(value)
}
</script>

<style lang="scss" scoped>
.projects {
  &__header {
    text-align: center;
  }
  
  &__intro {
    max-width: 800px;
    margin: 0 auto;
    font-size: $font-size-lg;
    color: var(--text-secondary);
    line-height: 1.8;
  }
  
  &__filter {
    background: var(--bg-secondary);
  }
  
  &__filter-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-xl;
    
    @include respond-to('md') {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @include respond-to('lg') {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  &__item {
    transition: all 0.3s ease;
  }
}

// 列表过渡动画
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.list-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.list-move {
  transition: transform 0.5s ease;
}
</style>

